<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="assets/css/ace.min.css" />
        <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
        <link rel="stylesheet" href="Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
        <link href="Widget/icheck/icheck.css" rel="stylesheet" type="text/css" />
		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
        <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
	    <script src="js/jquery-1.9.1.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/typeahead-bs2.min.js"></script>
		<!-- page specific plugin scripts -->
		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
        <script type="text/javascript" src="js/H-ui.js"></script>
        <script type="text/javascript" src="js/H-ui.admin.js"></script>
        <script src="assets/layer/layer.js" type="text/javascript" ></script>
        <script src="assets/laydate/laydate.js" type="text/javascript"></script>
        <script type="text/javascript" src="Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
        <script src="js/lrtk.js" type="text/javascript" ></script>
<title>产品列表</title>
</head>
<body>
<div class=" page-content clearfix">
 <div id="products_style">
    <div class="search_style">

      <ul class="search_content clearfix">
       <li><label class="l_f">产品名称</label><input name="" type="text"  class="text_add" placeholder="输入品牌名称"  style=" width:250px"/></li>

       <li style="width:90px;"><button type="button" class="btn_search"><i class="icon-search"></i>查询</button></li>
      </ul>
    </div>
     <div class="border clearfix">
       <span class="l_f">
        <a href="javascript:;" title="添加商品" class="btn btn-warning Order_form"><i class="icon-plus"></i>添加商品</a>
        <a href="javascript:;" class="btn btn-danger"><i class="icon-trash"></i>批量删除</a>
       </span>
       <span class="r_f">共：<b>2334</b>件商品</span>
     </div>
         <div class="table_menu_list" id="testIframe">
       <table class="table table-striped table-bordered table-hover" id="sample-table">
		<thead>
		    <tr>
				<th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
				<th width="80px">产品编号</th>
				<th width="80px">产品名称</th>
				<th width="80px">价格</th>
				<th width="150px">海报</th>
				<th width="100px">标签</th>
                <th width="80px">英文名</th>
				<th width="130px">上市时间</th>
                <th width="130px">发布时间</th>
				<th width="70px">工作室</th>
				<th width="80px">文件大小</th>
                <th width="70px">语言</th>
                <th width="120px">运行系统</th>
                <th width="150px">描述介绍</th>
                <th width="100px">购买总数</th>
                <th width="80px">状态</th>
				<th width="200px">操作</th>
			</tr>
		</thead>
	<tbody>

    </tbody>
    </table>
    </div>
  </div>
 </div>
</div>
<!-- 添加产品-->
<form action="" method="post" class="form form-horizontal" id="form-goods-add" style="display:none;">
		<div class="clearfix cl">
         <label class="form-label col-2"><span class="c-red">*</span>产品名称：</label>
		 <div class="formControls col-10"><input type="text" class="input-text" value="" placeholder="" id="" name="goods_name"></div>
		</div>
		<div class=" clearfix cl">
         <label class="form-label col-2">价格：</label>
	     <div class="formControls col-10"><input type="text" class="input-text" value="" placeholder="" id="" name="goods_price"></div>
		</div>
		<div class=" clearfix cl">
			<div class="Add_p_s">
            <label class="form-label col-2">海报：</label>
			<div class="formControls col-2"><input type="file" name="file" ></div>
            </div>
        </div>
        <div class=" clearfix cl">
			<div class="Add_p_s">
             <label class="form-label col-2">分类：</label>
			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="categoryid"></div>
			</div>
		</div>
		 <div class=" clearfix cl">
            <div class="Add_p_s">
             <label class="form-label col-2">标签：</label>
             <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="label"></div>
            </div>
        </div>
        <div class=" clearfix cl">
            <div class="Add_p_s">
             <label class="form-label col-2">英文名</label>
			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="engname"></div>
			</div>
		</div>
		<div class=" clearfix cl">
            <div class="Add_p_s">
             <label class="form-label col-2">上市时间：</label>
			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="tomarkettime"></div>
			</div>
		</div>
		<div class=" clearfix cl">
             <div class="Add_p_s">
             <label class="form-label col-2">发布时间：</label>
			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="publishtime" ></div>
			</div>
	    </div>

		<div class=" clearfix cl">
            <div class="Add_p_s">
             <label class="form-label col-2">工作室：</label>
			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="goods_studio" ></div>
			</div>
		</div>
		<div class=" clearfix cl">
            <div class="Add_p_s">
             <label class="form-label col-2">文件大小：</label>
			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="filesize" ></div>
			</div>
        </div>

		<div class="clearfix cl">
			<label class="form-label col-2">语言：</label>
			<div class="formControls col-10">
				<input type="text" class="input-text" value="" placeholder="" id="" name="language">
			</div>
		</div>
		<div class="clearfix cl">
            <label class="form-label col-2">运行系统：</label>
            <div class="formControls col-10">
                <input type="text" class="input-text" value="" placeholder="" id="" name="runsystem">
            </div>
        </div>
        <div class="clearfix cl">
            <label class="form-label col-2">描述介绍：</label>
            <div class="formControls col-10">
                <input type="text" class="input-text" value="" placeholder="" id="" name="describe">
            </div>
        </div>
        <div class="clearfix cl">
            <label class="form-label col-2">购买总数：</label>
            <div class="formControls col-10">
                <input type="text" class="input-text" value="" placeholder="" id="" name="buysum">
            </div>
        </div>

	</form>
<!-- 编辑产品-->
	<form action="" method="post" class="form form-horizontal" id="form-goods-edit" style="display:none;">
    		<div class="clearfix cl">
             <label class="form-label col-2"><span class="c-red">*</span>产品名称：</label>
    		 <div class="formControls col-10"><input type="text" class="input-text" value="" placeholder="" id="" name="goods_name"></div>
    		</div>
    		<div class=" clearfix cl">
             <label class="form-label col-2">价格：</label>
    	     <div class="formControls col-10"><input type="text" class="input-text" value="" placeholder="" id="" name="goods_price"></div>
    		</div>
            <div class=" clearfix cl">
    			<div class="Add_p_s">
                 <label class="form-label col-2">分类：</label>
    			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="categoryid"></div>
    			</div>
    		</div>
    		 <div class=" clearfix cl">
                <div class="Add_p_s">
                 <label class="form-label col-2">标签：</label>
                 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="label"></div>
                </div>
            </div>
            <div class=" clearfix cl">
                <div class="Add_p_s">
                 <label class="form-label col-2">英文名</label>
    			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="engname"></div>
    			</div>
    		</div>
    		<div class=" clearfix cl">
                <div class="Add_p_s">
                 <label class="form-label col-2">上市时间：</label>
    			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="tomarkettime"></div>
    			</div>
    		</div>
    		<div class=" clearfix cl">
                 <div class="Add_p_s">
                 <label class="form-label col-2">发布时间：</label>
    			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="publishtime" ></div>
    			</div>
    	    </div>

    		<div class=" clearfix cl">
                <div class="Add_p_s">
                 <label class="form-label col-2">工作室：</label>
    			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="goods_studio" ></div>
    			</div>
    		</div>
    		<div class=" clearfix cl">
                <div class="Add_p_s">
                 <label class="form-label col-2">文件大小：</label>
    			 <div class="formControls col-2"><input type="text" class="input-text" value="" placeholder="" id="" name="filesize" ></div>
    			</div>
            </div>

    		<div class="clearfix cl">
    			<label class="form-label col-2">语言：</label>
    			<div class="formControls col-10">
    				<input type="text" class="input-text" value="" placeholder="" id="" name="language">
    			</div>
    		</div>
    		<div class="clearfix cl">
                <label class="form-label col-2">运行系统：</label>
                <div class="formControls col-10">
                    <input type="text" class="input-text" value="" placeholder="" id="" name="runsystem">
                </div>
            </div>
            <div class="clearfix cl">
                <label class="form-label col-2">描述介绍：</label>
                <div class="formControls col-10">
                    <input type="text" class="input-text" value="" placeholder="" id="" name="describe">
                </div>
            </div>
            <div class="clearfix cl">
                <label class="form-label col-2">购买总数：</label>
                <div class="formControls col-10">
                    <input type="text" class="input-text" value="" placeholder="" id="" name="buysum">
                </div>
            </div>
             <div class="clearfix cl">
                <label class="form-label col-2">状态：</label>
                <div class="formControls col-10">
                   <label for="show">显示</label><input type="radio" id="show" name="status" value="1"/>
                   <label for="hidden">隐藏</label> <input type="radio" id="hidden" name="status" value="-1"/>
                </div>
            </div>
            <input type="hidden" name="id" value=""/>
    	</form>
</body>
</html>
<script>
jQuery(function($) {
    $('table th input:checkbox').on('click' , function(){
        var that = this;
        $(this).closest('table').find('tr > td:first-child input:checkbox')
        .each(function(){
            this.checked = that.checked;
            $(this).closest('tr').toggleClass('selected');
        });

    });
});

$(function() {
	$("#products_style").fix({
		float : 'left',
		//minStatue : true,
		skin : 'green',
		durationTime :false,
		spacingw:30,//设置隐藏时的距离
	    spacingh:260,//设置显示时间距
	});
});
</script>
<script type="text/javascript">
//初始化宽度、高度
 $(".widget-box").height($(window).height()-215);
$(".table_menu_list").width($(window).width()-260);
 $(".table_menu_list").height($(window).height()-215);
  //当文档窗口发生改变时 触发
    $(window).resize(function(){
	$(".widget-box").height($(window).height()-215);
	 $(".table_menu_list").width($(window).width()-260);
	  $(".table_menu_list").height($(window).height()-215);
	})


//查询所有数据
function QueryAll(){
    $.ajax({
        type:"post",
        url:"goods/goodsQueryAll.php",
        datatype:"json",
        success:function(data){
            console.log(data);
            createDom(data);
        }
    });
}
QueryAll();
// 建立dom渲染
function createDom(Nodes){
    var value = null;
    var dom = "";
    for(let i=0,len=Nodes.length;i<len;i++){
        value = Nodes[i];
       dom+='<tr>';
       dom+= '<td width="25px"><label><input type="checkbox" class="ace" data-index="'+value['id']+'"><span class="lbl"></span></label></td>';
       dom+= ' <td width="120px">'+value['id']+'</td>';
       dom+= '<td width="200px"><u style="cursor:pointer" class="text-primary" onclick="">'+value['goods_name']+'</u></td>';
       dom+= ' <td width="100px">'+value['goods_price']+'</td>';
       dom+= '<td width="100px"><img width="100" src="'+value['goods_bill']+'" alt=""></td>';

       dom+= '<td width="100px">'+value['goods_label']+'</td>';
       dom+= '<td width="120px">'+value['goods_engname']+'</td>';
       dom+= '<td width="220px">'+value['goods_tomarkettime']+'</td>';
       dom+= '<td width="220px">'+value['goods_publishtime']+'</td>';
       dom+= '<td width="160px">'+value['goods_studio']+'</td>';
       dom+= '<td width="120px">'+value['goods_filesize']+'</td>';
       dom+= '<td width="200px">'+value['goods_language']+'</td>';
       dom+= '<td width="200px">'+value['goods_runsystem']+'</td>';
        dom+= '<td width="220px">'+value['goods_describe']+'</td>';
       dom+= '<td width="100px">'+value['goods_buysum']+'</td>';
       if(value['goods_status']=="1"){
            dom+= '<td class="td-status"><span class="label label-success radius">显示</span></td>';
       }else if(value['goods_status']=="-1"){
           dom+= '<td class="td-status"><span class="label label-danger radius">隐藏</span></td>';
       }

       dom+= '<td width="200px" class="td-manage">';
           dom+= '<a title="编辑" href="javascript:;" data-index="'+value['id']+'" class="btn btn-xs btn-info"><i class="icon-edit bigger-120"></i></a>';
           dom+= '<a title="删除" href="javascript:;"  data-index="'+value['id']+'" class="btn btn-xs btn-warning"><i class="icon-trash  bigger-120"></i></a>';
           dom+= '</td>';
       dom+= '</tr>';
    }

   $("#testIframe").find("tbody")[0].innerHTML=dom;
}
//删除
$("tbody").eq(0).on("click",".btn-warning",function(){
    var index = $(this).data("index");
    $.ajax({
        type:"post",
        url:"goods/goodsDel.php",
        data:{
            id:index,
        },
        datatype:"json",
        success:function(data){
            console.log(data);
            layer.msg(data.msg);
            QueryAll();
        }
    });
})
// 编辑

$("tbody").eq(0).on("click",".btn-info",function(){
    var index = $(this).data("index");
    $.ajax({
        type:"post",
        url:"goods/goodsQueryOne.php",
        data:{
            id:index,
        },
        datatype:"json",
        success:function(data){
            console.log(data);
            data = data[0];
            // 写入表单值
            $("#form-goods-edit").find("input").eq(0).val(data['goods_name']);
            $("#form-goods-edit").find("input").eq(1).val(data['goods_price']);
            $("#form-goods-edit").find("input").eq(2).val(data['goods_categoryid']);
            $("#form-goods-edit").find("input").eq(3).val(data['goods_label']);
            $("#form-goods-edit").find("input").eq(4).val(data['goods_engname']);
            $("#form-goods-edit").find("input").eq(5).val(data['goods_tomarkettime']);
            $("#form-goods-edit").find("input").eq(6).val(data['goods_publishtime']);
            $("#form-goods-edit").find("input").eq(7).val(data['goods_studio']);
            $("#form-goods-edit").find("input").eq(8).val(data['goods_filesize']);
            $("#form-goods-edit").find("input").eq(9).val(data['goods_language']);
            $("#form-goods-edit").find("input").eq(10).val(data['goods_runsystem']);
            $("#form-goods-edit").find("input").eq(11).val(data['goods_describe']);
            $("#form-goods-edit").find("input").eq(12).val(data['goods_buysum']);
            if(data['status']==$("#form-goods-edit").find("input").eq(13).val()){
                $("#form-goods-edit").find("input").eq(13).attr("checked","checked");
            }else{
                $("#form-goods-edit").find("input").eq(14).attr("checked","checked");
            }
            $("#form-goods-edit").find("input").eq(15).val(index);

             layer.open({
                        type: 1,
                        title: '编辑产品',
                        maxmin: true,
                        shadeClose: false, //点击遮罩关闭层
                        area : ['800px' , ''],
                        content:$('#form-goods-edit'),
                        btn:['提交','取消'],
                        yes:function(index,layero){
            //     		    console.log(document.getElementById("form-goods-add"));
                        var formdata = new FormData(document.getElementById("form-goods-edit"));
                        $.ajax({
                            url:"goods/goodsEdit.php",
            // 		        async: false,//同步上传
                            cache: false,//上传文件无需缓存
                            processData: false,  // 不处理数据
                            contentType: false, // 不设置内容类型
                            type:"post",
                            datatype:"json",
                            data:formdata,
                            success:function(data){
                                console.log(data);
                                layer.msg(data.msg);
                                QueryAll();
                            },
                            error:function(e){
                                console.log(e);
                            }
                        });
                        layer.close(index);

                    }
                    });
        }
    });
})

// 模糊查询

$(".btn_search").eq(0).on('click',function(){
    var inputval = $(".text_add").val();
        $.ajax({
            url:"goods/goodsDimQuery.php",
            type:"post",
            data:{
                goods_name:inputval
            },
            datatype:"json",
            success:function(data){
                console.log(data);
                createDom(data.data);
            }

        });

});

// 批量删除
$(".btn-danger").eq(0).on('click',function(){
    var delList = [];
    $("table").find('tr > td:first-child input:checkbox').each(function(){
        if(this.checked ===true){
            delList.push(this.dataset.index);
        }
    });
    $.ajax({
        url:"goods/goodsMDel.php",
        type:"post",
        data:{
            selectlist:delList
        },
        datatype:"json",
        success:function(data){
            layer.msg(data.msg);
            QueryAll();
        }

    });
});
//添加产品
 $(".Order_form").eq(0).on('click',function(){
    layer.open({
            type: 1,
            title: '添加产品',
    		maxmin: true,
    		shadeClose: false, //点击遮罩关闭层
            area : ['800px' , ''],
            content:$('#form-goods-add'),
    		btn:['提交','取消'],
    		yes:function(index,layero){
//     		    console.log(document.getElementById("form-goods-add"));
    		var formdata = new FormData(document.getElementById("form-goods-add"));
    		    $.ajax({
    		        url:"goods/goodsInsert.php",
    // 		        async: false,//同步上传
                    cache: false,//上传文件无需缓存
                    processData: false,  // 不处理数据
                    contentType: false, // 不设置内容类型
    		        type:"post",
    		        datatype:"json",
    		        data:formdata,
    		        success:function(data){
                        console.log(data);
                        layer.msg(data.msg);
                        QueryAll();
    		        },
    		        error:function(e){
    		            console.log(e);
    		        }
    		    });
    			layer.close(index);

    		}
        });
 });
</script>
